<template>
  <el-dialog
    modal-class="addDigitalAssistantDialog"
    :show-close="false"
    v-model="dialogVisiable"
    width="600px"
    center
    @close="onClose"
  >
    <template #header>
      <div class="addDigitalAssistantDialogHeader">
        <div class="addDigitalAssistantDialogTitle">
          <img class="w-[24px] h-[24px]" :src="AddDiditalAssistantIcon" />
          <div class="addDigitalAssistantDialogTitleText">
            {{ formData.id ? "编辑数字助手" : "新建数字助手" }}
          </div>
        </div>
        <ElIcon @click="emit('closeDialog')" :size="20">
          <Close style="cursor: pointer; color: #f86e07" />
        </ElIcon>
      </div>
    </template>
    <div class="addDigitalAssistantDialogContent flex flex-col justify-center">
      <div class="description">订制专属于您自己的AI角色。</div>
      <div class="settingOptions">
        <el-radio-group
          v-model="settingMethod"
          @change="onChange"
          class="settingRadioGroup"
        >
          <el-radio-button label="通用设置" value="commonSetting" />
          <el-radio-button label="高级设置" value="advancedSetting" />
        </el-radio-group>
      </div>
      <div class="settingDivideLine mt-[10px]"></div>
      <!-- <div class="mt-[10px]">
                    <sd-select title="Model" placeholder="通用模型"></sd-select>
                </div> -->
      <el-form
        :model="formData"
        label-position="top"
        ref="formRef"
        style="margin: 15px auto"
      >
        <div class="w-[520px]" v-show="settingMethod == '通用设置'">
          <el-form-item
            :rules="[
              {
                required: true,
                message: '名称必填',
                trigger: 'blur',
              },
            ]"
            label="名称"
            prop="name"
          >
            <el-input
              v-model="formData.name"
              placeholder="为数字助手起一个专属名称"
            />
          </el-form-item>
          <el-form-item
            label="图标"
            prop="image"
            :rules="[
              {
                required: true,
                message: '请上传助手图标',
                trigger: 'blur',
              },
            ]"
          >
            <upload
              class="mt-[10px] w-[150px] h-[150px]"
              :show-progress="true"
              :data="{
                type: 'icon',
              }"
              :limitSize="1"
              @success="(val) => (formData.image = val.data.path)"
            >
              <div
                class="flex flex-col items-center justify-center upload-view-box"
              >
                <template v-if="!formData.image">
                  <el-icon style="margin-top: 10px" :size="40"
                    ><upload-filled
                  /></el-icon>
                  <div
                    style="
                      margin-top: 10px;
                      width: 48px;
                      height: 17px;
                      font-family: PingFang SC, PingFang SC;
                      font-weight: 400;
                      font-size: 12px;
                      color: var(--color-btn-text);
                      line-height: 14px;
                      text-align: left;
                      font-style: normal;
                      text-transform: none;
                    "
                    class="mt-[6px]"
                  >
                    上传图片
                  </div>
                </template>
                <template v-else>
                  <el-image
                    class="w-full h-[90px]"
                    :src="formData.image"
                    fit="contain"
                  />
                </template>
              </div>
            </upload>
          </el-form-item>
          <el-form-item
            label="助手描述"
            prop="tips"
            :rules="[
              {
                required: true,
                message: '请输入助手描述',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="formData.tips"
              placeholder="请输入助手描述"
              type="textarea"
              :rows="2"
            />
          </el-form-item>
          <!-- <div>
            <div class="flex">
              <div class="formItemTitle">预设内容</div>
              <div class="formItemTip ml-[5px]">
                为了使答案更准确，你需要成对使用"user" 和"assistan
              </div>
            </div>

            <el-button class="commonSettingButton" :icon="Plus">添加</el-button>
          </div> -->
        </div>
        <div v-show="settingMethod == '高级设置'">
          <div class="flex flex-col">
            <el-form-item prop="n">
              <div class="w-[500px] mr-[20px] mb-[20px]">
                <div class="flex items-center text-tx-regular text-xs">
                  <span class="mr-[4px] mt-[2px]">最大回复</span>
                  <el-tooltip
                    class="box-item"
                    :effect="effect"
                    content="为每个输入消息生成多少个聊天完成选项，取值范围为1~5之间的整数。"
                    placement="top"
                  >
                    <el-icon size="16px">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>

                <el-slider v-model="formData.n" :min="1" :max="5" />
              </div>
            </el-form-item>
            <el-form-item prop="temperature">
              <div class="w-[500px] mr-[20px] mb-[20px]">
                <div class="flex items-center text-tx-regular text-xs">
                  <span class="mr-[4px] mt-[2px]">词汇属性</span>
                  <el-tooltip
                    class="box-item"
                    :effect="effect"
                    content="用于控制生成文本的随机性，取值范围为0~1之间的浮点数，建议取值0.7左右。"
                    placement="top"
                  >
                    <el-icon size="16px">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>

                <el-slider
                  v-model="formData.temperature"
                  :min="0"
                  :max="1"
                  :step="0.1"
                />
              </div>
            </el-form-item>
            <el-form-item prop="topP">
              <div class="w-[500px] mr-[20px] mb-[20px]">
                <div class="flex items-center text-tx-regular text-xs">
                  <span class="mr-[4px] mt-[2px]">随机属性</span>
                  <el-tooltip
                    class="box-item"
                    :effect="effect"
                    content="用于控制生成文本的多样性，取值范围为0~1之间的浮点数，建议取值0.9左右。"
                    placement="top"
                  >
                    <el-icon size="16px">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
                <el-slider
                  v-model="formData.topP"
                  :min="0"
                  :max="1"
                  :step="0.1"
                />
              </div>
            </el-form-item>
            <el-form-item prop="presencePenalty">
              <div class="w-[500px] mr-[20px] mb-[20px]">
                <div class="flex items-center text-tx-regular text-xs">
                  <span class="mr-[4px] mt-[2px]">话题属性</span>
                  <el-tooltip
                    class="box-item"
                    :effect="effect"
                    content="用于控制生成文本中是否出现给定的关键词，取值范围为0~1之间的浮点数，建议取值0.5左右。"
                    placement="top"
                  >
                    <el-icon size="16px" color="#fff">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>

                <el-slider
                  v-model="formData.presencePenalty"
                  :step="0.1"
                  :min="0"
                  :max="1"
                />
              </div>
            </el-form-item>
            <el-form-item prop="frequencyPenalty">
              <div class="w-[500px] mr-[20px] mb-[20px]">
                <div class="flex items-center text-tx-regular text-xs">
                  <span class="mr-[4px] mt-[2px]">重复属性</span>
                  <el-tooltip
                    class="box-item"
                    :effect="effect"
                    content="用于控制生成文本中重复的程度，取值范围为0~1之间的浮点数，建议取值0.5左右"
                    placement="top"
                  >
                    <el-icon size="16px">
                      <QuestionFilled />
                    </el-icon>
                  </el-tooltip>
                </div>
                <el-slider
                  v-model="formData.frequencyPenalty"
                  :step="0.1"
                  :min="0"
                  :max="1"
                />
              </div>
            </el-form-item>
          </div>

          <!-- <el-form-item label="apiHost">
            <el-input v-model="form.model" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="话题属性">
            <el-slider v-model="data.form.presencePenalty" :min="0" :max="1" :step="0.1" />
          </el-form-item>
          <el-form-item label="重复属性">
            <el-slider v-model="data.form.frequencyPenalty" :min="0" :max="1" :step="0.1" />
          </el-form-item>
          <el-form-item label="最大回复">
            <el-slider v-model="data.form.n" :min="1" :max="5" :step="1" />
          </el-form-item>
          <div class="formSwitch">
            <el-form-item label="apiHost">
              <el-switch />
            </el-form-item>
          </div> -->
        </div>
      </el-form>
      <!-- <div class="settingDivideLine mt-[60px]"></div> -->
      <div class="mt-[20px]">
        <el-button type="primary" style="float: right" @click="add"
          >创建</el-button
        >
        <el-button style="float: right; margin-right: 10px" @click="onClose"
          >重置</el-button
        >
      </div>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { QuestionFilled, UploadFilled } from "@element-plus/icons-vue";
import AddDiditalAssistantIcon from '~/assets/images/add_digital_assistant_icon.png'
import { myList, addMyai, getMyai, editMyai } from "~/api/myai";
const dialogVisiable = ref(false);
const settingMethod = ref("通用设置");
const emits = defineEmits(["submit"]);
const open = (id: any) => {
  console.log(id);

  if (id) {
    formData.id = id;
    getDetail();
  }
  dialogVisiable.value = true;
};
const formRef = ref();
const getDetail = async () => {
  const res = await getMyai({ id: formData.id });
  Object.keys(formData).forEach((key: string) => {
    formData[key] = res[key];
  });
};
const onChange = (e: any) => {
  console.log(e);
};
const add = async () => {
  try {
    formData.id ? await editMyai(formData) : await addMyai(formData);
    feedback.msgSuccess(formData.id ? "修改成功" : "创建成功");
    emits("submit");
  } catch (error) {}
};
const effect = "light";
const form = reactive({
  model: "",
  name: "",
});
//表单数据
const formData = reactive<any>({
  id: "",
  name: "", //名称
  tips: "", //副标题
  // categoryId: "", //分类id
  content: "", //内容
  sort: 0, //排序
  // system: "", // 全局指令
  // virtualUseNum: "", // 虚拟使用量
  isEnable: 1, //状态
  image: "", //图标
  // form: [] as any[],
  n: 1, // 最大回复
  temperature: 0.7, //词汇属性
  topP: 0.9, //随机属性
  frequencyPenalty: 0.5,
  presencePenalty: 0.5,
});
const onClose = () => {
  console.log("重置");
  formData.id = "";
  formRef.value?.resetFields();
};
defineExpose({
  open,
});
</script>
<style lang="scss">
:deep(.el-dialog) {
  background: #363a46;
}

.addDigitalAssistantDialog {
  //   width: 600px;
  border-radius: 6px 6px 6px 6px;

  .addDigitalAssistantDialogHeader {
    background: #363a46;
    height: 20px;
    border-radius: 0px 0px 0px 0px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    .addDigitalAssistantDialogTitle {
      display: flex;
      align-items: center;
    }

    .addDigitalAssistantDialogTitleText {
      height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }

  .addDigitalAssistantDialogContent {
    :deep(.el-form-item__label) {
      height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    :deep(.el-input__wrapper) {
      background: #121318;
    }

    .description {
      height: 20px;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 14px;
      color: #616772;
      line-height: 16px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }

    .formSwitch {
      :deep(.el-form-item) {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .el-form-item__label {
          line-height: 26px;
        }

        .el-form-item__content {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }

  .settingOptions {
    width: 100%;
    margin-top: 20px;

    .settingRadioGroup {
      margin: 0 auto;
      display: flex;
      justify-content: center;

      :deep(.el-radio-button__inner) {
        width: 200px;
        background: #262932;
        border: none;
      }
    }
  }

  .settingDivideLine {
    width: 100%;
    height: 0px;
    border: 1px solid #595c61;
  }

  .formItemTitle {
    height: 20px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 16px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .formItemTip {
    height: 14px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 10px;
    color: #616772;
    line-height: 12px;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }

  .commonSettingButton {
    margin-top: 10px;
    width: 100%;
    background: #41444e;
    border: none;
  }
}

// 上传参考图
.upload-view-box {
  position: relative;
  width: 100%;
  height: 124px;
  border-radius: 8px 8px 8px 8px;
  border-right: 4px;
  border: 1px dashed #dcdfe6;

  .upload-view-item {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .upload-clear {
    position: absolute;
    right: 20px;
    top: 14px;
    cursor: pointer;
  }
}

.upload-view-box:hover .upload-view-item {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
